<template>
    <div style='position: fixed;z-index: 1000;top:0;left:0; width:100%;height:100vh;background: rgba(0,0,0,.5);padding:100px 50px;overflow: scroll;'>
        <img @click="returnFull" style="position: absolute;top: 40px;left: 100%;margin-left: -50px;" src="../../../assets/close_icon.svg">
        <!-- <page-layout title="单号：234231029431" logo="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png"> -->
            
          <div style="background: #fff;">
            <a-card style="margin-top: -10px" :bordered="false" title="店家信息">
              <div class="titleSty">基础信息</div>
              <detail-list>
                <detail-list-item term="剧本名称">{{listData.productName}}</detail-list-item>
                <detail-list-item term="作者">{{listData.author}}</detail-list-item>
                <detail-list-item term="批次">{{listData.itemPatch}}</detail-list-item>
                <detail-list-item term="总量">{{listData.total}}</detail-list-item>
                <detail-list-item term="标签">{{listData.labelTags}}</detail-list-item>
                <detail-list-item term="正式发行时间">{{listData.publicTime}} </detail-list-item>
              </detail-list>  
              <div class="titleSty">剧本详细信息</div>      
              <detail-list>
                <detail-list-item term="剧本人数" v-if="listData.playbillNumber && listData.playbillNumber.indexOf(',')==-1">男女不限{{listData.playbillNumber}}人</detail-list-item>
                <detail-list-item term="剧本人数" v-if="listData.playbillNumber && listData.playbillNumber.indexOf(',')!=-1">男{{listData.playbillNumber.split(',')[0]}}人,女{{listData.playbillNumber.split(',')[1]}}人</detail-list-item>
                <detail-list-item term="剧本简介">{{listData.detailInfo}}</detail-list-item>
                <detail-list-item term="一句话简介">{{listData.productInfo}}</detail-list-item>
                <detail-list-item term="剧本实景">
                  <span v-if="listData.playReality == '1'">是</span>
                  <span v-if="listData.playReality == '0'">否</span>
                </detail-list-item>
                <detail-list-item term="剧本形式">
                  <span v-if="listData.playbillForm && listData.playbillForm.indexOf('1')!=-1">封闭/</span>
                  <span v-if="listData.playbillForm && listData.playbillForm.indexOf('2')!=-1">半封闭/</span>
                  <span v-if="listData.playbillForm && listData.playbillForm.indexOf('3')!=-1">开放/</span>
                  <span v-if="listData.playbillForm && listData.playbillForm.indexOf('4')!=-1">本格/</span>
                  <span v-if="listData.playbillForm && listData.playbillForm.indexOf('5')!=-1">半格/</span>
                  <span v-if="listData.playbillForm && listData.playbillForm.indexOf('6')!=-1">还原/</span>
                </detail-list-item>
                <detail-list-item term="剧本类型">
                  <span v-if="listData.playbillType && listData.playbillType.indexOf('1')!=-1">欢乐/</span>
                  <span v-if="listData.playbillType && listData.playbillType.indexOf('2')!=-1">对抗/</span>
                  <span v-if="listData.playbillType && listData.playbillType.indexOf('3')!=-1">情感/</span>
                  <span v-if="listData.playbillType && listData.playbillType.indexOf('4')!=-1">恐怖/</span>
                  <span v-if="listData.playbillType && listData.playbillType.indexOf('5')!=-1">谍战/</span>
                  <span v-if="listData.playbillType && listData.playbillType.indexOf('6')!=-1">魔幻/</span>
                  <span v-if="listData.playbillType && listData.playbillType.indexOf('7')!=-1">玄幻/</span>
                  <span v-if="listData.playbillType && listData.playbillType.indexOf('8')!=-1">仙侠/</span>
                  <span v-if="listData.playbillType && listData.playbillType.indexOf('9')!=-1">硬核</span>
                </detail-list-item>
                <detail-list-item term="适合人群">
                  <span v-if="listData.belongtoCrowd && listData.belongtoCrowd.indexOf('1')!=-1">新手/</span>
                  <span v-if="listData.belongtoCrowd && listData.belongtoCrowd.indexOf('2')!=-1">进阶/</span>
                  <span v-if="listData.belongtoCrowd && listData.belongtoCrowd.indexOf('3')!=-1">烧脑</span>
                </detail-list-item>
                <detail-list-item term="游戏时间">{{listData.playTime}}小时</detail-list-item>
                <detail-list-item term="道具支持">
                  <span v-if="listData.propStatus && listData.propStatus.toString().indexOf('1')!=-1">有</span>
                  <span v-if="listData.propStatus && listData.propStatus.toString().indexOf('2')!=-1">无</span>
                </detail-list-item>
                <detail-list-item term="剧本供应买断状态">
                  <span v-if="listData.buyoutStatus && listData.buyoutStatus.indexOf('1')!=-1">盒装</span>
                  <span v-if="listData.buyoutStatus && listData.buyoutStatus.indexOf('2')!=-1">限定/</span>
                  <span v-if="listData.buyoutStatus && listData.buyoutStatus.indexOf('3')!=-1">独家</span>
                </detail-list-item>
              </detail-list>
              <div class="titleSty">资料上传</div>
              <detail-list>
                <detail-list-item term="剧本实拍图">
                  <ul>
                    <li v-for="val in personPoster">
                      <img :src="val" style="width:70%;height:160px;">
                    </li>
                  </ul>
                </detail-list-item>
                <detail-list-item term="剧本海报">
                  <ul>
                    <li v-for="val in playbillPoster">
                      <img :src="val" style="width:70%;height:160px;">
                    </li>
                  </ul>
                  </detail-list-item>
                <detail-list-item term="人物海报">
                  <ul>
                    <li v-for="val in productIamges">
                      <img :src="val" style="width:70%;height:160px;">
                    </li>
                  </ul>
                  </detail-list-item>
                <detail-list-item term="道具资料">
                  <ul style="list-style: none;">
                    <li v-for="val in propData" style="margin-bottom:25px;">
                      <img :src="val" style="width:70%;height:160px;">
                    </li>
                  </ul>
                </detail-list-item>
              </detail-list>
            </a-card>
          </div>  
      
      
        <!-- </page-layout> -->
    </div>
  </template>
  
  <script>
    import { mixinDevice } from '@/utils/mixin.js'
    import PageLayout from '@/components/page/PageLayout'
    import DetailList from '@/components/tools/DetailList'
    import JDictSelectTag from "@/components/dict/JDictSelectTag"
  
    const DetailListItem = DetailList.Item
  
    export default {
      name: "BlockProductStandardsAll",
      components: {
        PageLayout,
        DetailList,
        JDictSelectTag,
        DetailListItem
      },
      props:['listData'],
      mixins: [mixinDevice],
      data () {
        return {
          activeTabKey: '1',
          propData:[],
          productIamges:[],
          playbillPoster:[],
          personPoster:[],
          validatorRules: {
            playbillType: {rules: [
            ]},
            bindStatus: {rules: [
            ]},
            phone: {rules: [
            ]},
            publickey: {rules: [
            ]},
            qrcodeImage: {rules: [
            ]},
          },
        }
      },
      filters: {
        statusFilter(status) {
          const statusMap = {
            'agree': '成功',
            'reject': '驳回'
          }
          return statusMap[status]
        },
        statusTypeFilter(type) {
          const statusTypeMap = {
            'agree': 'success',
            'reject': 'error'
          }
          return statusTypeMap[type]
        }
      },
      mounted() {
        if(this.listData.propData){
          this.imgFileter(this.listData.propData,1);
        }
        if(this.listData.productImages){
          this.imgFileter(this.listData.productImages,2);
        }
        if(this.listData.playbillPoster){
          this.imgFileter(this.listData.playbillPoster,3);
        }
        if(this.listData.personPoster){
          this.imgFileter(this.listData.personPoster,4);
        }
      },
      methods: {
        //图片参数过滤
        imgFileter(str,num){
          if(num == 1){
            this.propData = [];
          }
          if(num == 2){
            this.productIamges = [];
          }
          if(num == 3){
            this.playbillPoster = [];
          }
          if(num == 4){
            this.personPoster = [];
          }
          if(str.indexOf(",")!=-1){
            var logoAr = str.split(",");
          }else{
            var logoAr = [str];
          }
          var afterImg = "";
          for(let i=0;i<logoAr.length;i++){
            if(num == 1){
              this.propData.push(afterImg+logoAr[i]);
            }
            if(num == 2){
              this.productIamges.push(afterImg+logoAr[i]);
            }
            if(num == 3){
              this.playbillPoster.push(afterImg+logoAr[i]);
            }
            if(num == 4){
              this.personPoster.push(afterImg+logoAr[i]);
            }
          }
        },
        returnFull(){
            this.$emit('returnUp',false)
        }
      },
    }
  </script>
  
  <style lang="scss" scoped>
    .titleSty{
      font-size: 18px;
      font-weight: bold;
      margin: 30px 0 10px 0;
    }
    ul{
      list-style-type:none;
    }
    .detail-layout {
      /* margin-left: 44px; */
    }
    .text {
      color: rgba(0, 0, 0, .45);
    }
  
    .heading {
      color: rgba(0, 0, 0, .85);
      font-size: 20px;
    }
  
    .no-data {
      color: rgba(0, 0, 0, .25);
      text-align: center;
      line-height: 64px;
      font-size: 16px;
  
      i {
        font-size: 24px;
        margin-right: 16px;
        position: relative;
        top: 3px;
      }
    }
  
    .mobile {
      .detail-layout {
        margin-left: unset;
      }
      .text {
  
      }
      .status-list {
        text-align: left;
      }
    }
  </style>